<template>
  <div>
    <el-form-item label="是否选择时间范围">
      <el-select
        v-model="componentInfo.timeRange"
        placeholder="是否选择时间范围"
        @change="change"
         style="width: 100%"
      >
        <el-option
          v-for="item in timeRange"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时间类型">
      <el-select v-model="componentInfo.timeType" placeholder="请选择时间类型"  style="width: 100%">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
import basic from "./basic.vue";
export default {
  extends: basic,
  name: "templateInput",
  computed: {
    options() {
      if (!this.componentInfo.timeRange) {
        return [
          {
            label: "年",
            value: "year",
          },
          {
            label: "月",
            value: "month",
          },
          {
            label: "日",
            value: "date",
          },
        ];
      } else {
        return [
          {
            label: "时分秒区间",
            value: "datetimerange",
          },
          {
            label: "月",
            value: "monthrange",
          },
          {
            label: "日",
            value: "daterange",
          },
        ];
      }
    },
  },
  data() {
    return {
      timeRange: [
        {
          label: "是",
          value: true,
        },
        {
          label: "否",
          value: false,
        },
      ],
    };
  },
  methods: {
      change() {
          this.componentInfo.timeType = ''
      }
  }
};
</script>